
<template>
    <div>
        <head-top></head-top>
        <el-row style="margin-top: 80px;">
            <el-col :span="12" :offset="4">
                <h2>添加小结</h2>
                <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
                    <el-form-item label="课程分类" prop="type">
                        <el-select v-model="formData.type" placeholder="请选择课程分类">
                            <el-option label="前端" value="shanghai"></el-option>
                            <el-option label="后端" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称" prop="name">
                        <el-select v-model="formData.name" placeholder="请选择课程名称">
                            <el-option label="html" value="shanghai"></el-option>
                            <el-option label="css" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="章节名称" prop="passname">
                        <el-select v-model="formData.passname" placeholder="请选择章节名称">
                            <el-option label="第一章" value="shanghai"></el-option>
                            <el-option label="第二章" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="小结名" prop="pairname">
                        <el-input v-model="formData.pairname"></el-input>
                    </el-form-item>
                    <el-form-item label="小结资料" prop="pairfile">
                        <el-input type="textarea" v-model="formData.pairfile"></el-input>
                        <el-button class="files">上传资料</el-button>
                    </el-form-item>
                    <el-form-item class="button_submit">
                        <el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>


import headTop from '../../components/headTop.vue'
import { cityGuess, addShop, searchplace, foodCategory } from '../../api/getData'
import { baseUrl, baseImgPath } from '../../config/env'
export default {
    data() {
        return {
            city: {},
            formData: {
                type: '', //课程分类
                name: '', //课程名称
                passname: '', //章节名称
                pairname: '',//小结名称
                pairfile: '' //小结资料
            },
            rules: {
                name: [
                    { required: true, message: '请输入店铺名称', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入联系电话' },
                    { type: 'number', message: '电话号码必须是数字' }
                ],
            },

            baseUrl,
            baseImgPath,
            categoryOptions: [],
        }
    },
    components: {
        headTop,
    },
    mounted() {
        this.initData();
    },
    methods: {
        async initData() {
            try {
                this.city = await cityGuess();
                const categories = await foodCategory();
                categories.forEach(item => {
                    if (item.sub_categories.length) {
                        const addnew = {
                            value: item.name,
                            label: item.name,
                            children: []
                        }
                        item.sub_categories.forEach((subitem, index) => {
                            if (index == 0) {
                                return
                            }
                            addnew.children.push({
                                value: subitem.name,
                                label: subitem.name,
                            })
                        })
                        this.categoryOptions.push(addnew)

                    }
                })
            } catch (err) {
                console.log(err);
            }
        },
        async querySearchAsync(queryString, cb) {
            if (queryString) {
                try {
                    const cityList = await searchplace(this.city.id, queryString);
                    if (cityList instanceof Array) {
                        cityList.map(item => {
                            item.value = item.address;
                            return item;
                        })
                        cb(cityList)
                    }
                } catch (err) {
                    console.log(err)
                }
            }
        },
        addressSelect(address) {
            this.formData.latitude = address.latitude;
            this.formData.longitude = address.longitude;
            console.log(this.formData.latitude, this.formData.longitude)
        },

        tableRowClassName(row, index) {
            if (index === 1) {
                return 'info-row';
            } else if (index === 3) {
                return 'positive-row';
            }
            return '';
        },
        handleDelete(index) {
            this.activities.splice(index, 1)
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    Object.assign(this.formData, { activities: this.activities }, {
                        category: this.selectedCategory.join('/')
                    })
                    try {
                        let result = await addShop(this.formData);
                        if (result.status == 1) {
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });
                            this.formData = {
                                name: '', //店铺名称
                                address: '', //地址
                                latitude: '',
                                longitude: '',
                                description: '', //介绍
                                phone: '',
                                promotion_info: '',
                                float_delivery_fee: 5, //运费
                                float_minimum_order_amount: 20, //起价
                                is_premium: true,
                                delivery_mode: true,
                                new: true,
                                bao: true,
                                zhun: true,
                                piao: true,
                                startTime: '',
                                endTime: '',
                                image_path: '',
                                business_license_image: '',
                                catering_service_license_image: '',
                            };
                            this.selectedCategory = ['快餐便当', '简餐'];
                            this.activities = [{
                                icon_name: '减',
                                name: '满减优惠',
                                description: '满30减5，满60减8',
                            }];
                        } else {
                            this.$message({
                                type: 'error',
                                message: result.message
                            });
                        }
                        console.log(result)
                    } catch (err) {
                        console.log(err)
                    }
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: '请检查输入是否正确',
                        offset: 100
                    });
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="less" scoped>
@import '../../style/mixin';

.button_submit {
    text-align: center;
}

.files {
    margin-top: 15px;
}

h2 {
    text-align: center;
    margin-bottom: 50px;
    color: grey;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.el-table .info-row {
    background: #c9e5f5;
}

.el-table .positive-row {
    background: #e2f0e4;
}
</style>
